@import "./base.less";

html {
    font-size: calc(100vw/ 7.5);
}

html,
body {
    height: 100%;
    width: 100%;
    background: #f5f5f5;
}

.cardContent {
    width: calc(100vw - .8rem);
    margin: .4rem auto;
    background: #fff;
    box-shadow: 0 0 .1rem rgba(0, 0, 0, .1);
    border-radius: .2rem;
    padding: .5rem .4rem .2rem;
    .bz();

    >p:first-child {
        font-size: .3rem;
        font-weight: 600;
        margin-bottom: .3rem;
    }

    >p:nth-child(2) {
        font-size: .26rem;
        margin-bottom: .3rem;
        color: #aaa;
    }

    .card {
        background: #f4f4f4f6;
        border-radius: .2rem;
        padding: .2rem 0 .2rem .2rem;
        margin-bottom: .2rem;

        .item {
            margin-bottom: .2rem;

            >p {
                font-size: .24rem;
                margin-bottom: .2rem;
                font-weight: 600;
            }

            .selectbox {
                display: flex;

                .select {
                    display: flex;
                    align-items: center;
                    margin-right: .6rem;

                    i {
                        width: .4rem;
                        height: .4rem;
                        border-radius: 50%;
                        border: .03rem solid #ccc;
                        margin-right: .1rem;
                        position: relative;
                        .bz();

                        &.selected {
                            background: #1890ff;
                        }

                        &.selected:after {
                            content: '';
                            position: absolute;
                            width: .15rem;
                            height: .15rem;
                            background: #fff;
                            border-radius: 50%;
                            .center()
                        }
                    }

                    span {
                        font-size: .26rem;
                    }
                }
            }

            .starbox {
                display: flex;

                .star {
                    width: .4rem;
                    height: .4rem;
                    margin-right: .2rem;

                    svg {
                        width: 100%;
                        height: 100%;
                        color: #ccc;
                    }

                    &.active {
                        svg {
                            color: #1890ff;
                        }
                    }
                }
            }

            .opinion {
                display: none;
                .optionbox {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    margin: .3rem 0 .2rem 0;

                    .option {
                        width: 1.7rem;
                        height: .5rem;
                        font-size: .24rem;
                        border: .01rem solid #ccc;
                        text-align: center;
                        line-height: .5rem;
                        border-radius: .1rem;
                        background-color: #fff;
                        color: #85898f;
                        margin-bottom: .15rem;
                        margin-right: .13rem;
                        &:nth-child(3n) {
                            margin-right: 0;
                        }

                        &.active {
                            border-color: #1890ff;
                            color: #1890ff;
                        }
                    }
                }

                .textareabox {
                    position: relative;
                    background-color: #fff;
                    padding-bottom: .4rem;
                    width: calc(100% - .2rem);

                    textarea {
                        width: 100%;
                        border: none;
                        outline: none;
                        resize: none;
                        padding: .1rem;
                        box-sizing: border-box;
                    }

                    span {
                        position: absolute;
                        bottom: .2rem;
                        right: .2rem;
                        font-size: .2rem;
                        color: #85898f;
                    }
                }

                >p {
                    margin-top: .2rem;
                    font-size: .24rem;
                }
            }

        }
    }

    .btn {
        width: 5rem;
        height: .8rem;
        border: .02rem solid #1890ff;
        // background: #1890ff;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .3rem;
        // color: #fff;
        color: #1890ff;
        font-weight: 600;
        border-radius: .1rem;
        margin: 1rem auto .5rem;
    }
}

.show {
    display: block !important;
}